<template>
	<div class="industryShareholder">
		<header-Name :name="headerTitle"></header-Name>
		<div class="content">
			<el-table size="medium"  :row-style="{background:'rgba(245,247,250,0.4)'}"  :header-row-style="{background:'rgba(248,249,253,0.4)'}" :data="tableData" style="width: 100%">
				<el-table-column prop="account" label="账号" width="210">
					<template slot-scope="scope">
						<el-button type="text" size="mini">{{ scope.row.account }}</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="户名"></el-table-column>
				<el-table-column prop="saving" label="存款种类"></el-table-column>
				<el-table-column prop="site" label="开户网点"></el-table-column>
				<el-table-column prop="currencyType" label="币种"></el-table-column>
				<el-table-column prop="remaining" label="余额"></el-table-column>
				<el-table-column prop="useRemain" label="可用余额"></el-table-column>
				<el-table-column prop="state" label="状态"></el-table-column>
				<el-table-column fixed="right" label="操作" width="144"  :render-header="renderHeader">
					<template slot-scope="scope">
						<el-button type="text" size="mini">企业名片</el-button>
						<el-button type="text" size="mini">明细</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="paginationBox">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
					:current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
					layout="total,  prev, pager, next, sizes, jumper" :total="400">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import HeaderName from './headerName.vue';
	export default {
		name: 'industryShareholder', //工商股东信息
		components: {
			HeaderName
		},
		data() {
			return {
				headerTitle:"工商股东信息",
				currentPage4: 4,
				tableData: [{
					account: '8373 2293 7377 2929 283',
					name: '网银对公测试',
					saving: "定期",
					site: "总行营业部",
					currencyType: "人民币",
					remaining: "4,700.00",
					useRemain: "1200.00",
					state: "正常",
				}, {
					account: '8373 2293 7377 2929 283',
					name: '网银对公测试',
					saving: "定期",
					site: "总行营业部",
					currencyType: "人民币",
					remaining: "4,700.00",
					useRemain: "1200.00",
					state: "正常",
				}, {
					account: '8373 2293 7377 2929 283',
					name: '网银对公测试',
					saving: "定期",
					site: "总行营业部",
					currencyType: "人民币",
					remaining: "4,700.00",
					useRemain: "1200.00",
					state: "正常",
				}, {
					account: '8373 2293 7377 2929 283',
					name: '网银对公测试',
					saving: "定期",
					site: "总行营业部",
					currencyType: "人民币",
					remaining: "4,700.00",
					useRemain: "1200.00",
					state: "正常",
				}, {
					account: '8373 2293 7377 2929 283',
					name: '网银对公测试',
					saving: "定期",
					site: "总行营业部",
					currencyType: "人民币",
					remaining: "4,700.00",
					useRemain: "1200.00",
					state: "正常",
				}]
			}
		},
		computed: {
			...mapGetters({
				codeCombo: 'getCodeCombo',
				permissionList: 'getPermission',
				userInfo: 'getUserInfo',
			}),
		},
		activated() {

		},
		created() {

		},
		methods: {
			renderHeader(h, { column }) {
				// h即为cerateElement的简写，具体可看vue官方文档
				return h('div', [
					h('span', column.label),
					h('i', {
						style:"padding-left:44px",
						class: 'el-icon-setting',
					}),
				]);
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			}
		},
	}
</script>

<style lang="scss" scoped>
	.industryShareholder {
		max-width: 1200px;
		width: 100%;
		height: 600px;
		background-color: #FFFFFF;
		background-image: url('../../../../../assets/img/work/custInfo/riskOverviewBground.png');
		background-size: 100% 100%;
		.content {
			.paginationBox{
				margin-top: 24px;
				padding-right: 24px;
				box-sizing: border-box;
				width: 100%;
				display: flex;
				justify-content: flex-end;
			}
			margin-top: 4px;
			width: 100%;
			height: calc(100% - 64px);
			box-sizing: border-box;
			padding-top: 6px;
			padding: 0px 0px;
			::v-deep.el-table__header th {
				border-right: none!important;
			}
			::v-deep.el-table__cell .cell {
			    text-align: left;
			}
			::v-deep.el-table td .cell {
			    font-size: 14px !important;
			    color: #222222 !important;
			    line-height: 18px !important;
			    padding: 28px 2px 28px  20px !important;
			}
			::v-deep.el-button--text {
			    color: #1890FF;
			}
			::v-deep.el-table th {
				height: 75px;
			    text-align: left!important;
			}
			 ::v-deep.el-table th.el-table__cell {
				 padding: 0px !important;
			 }
			 ::v-deep.el-table th .cell {
			 	padding: 10px 2px 10px  24px !important;
			 }

			::v-deep.el-pagination.is-background .btn-prev, ::v-deep.el-pagination.is-background .btn-next, ::v-deep.el-pagination.is-background .el-pager li {
			    margin: 0 5px;
			    background-color: #ffffff;
			    color: #606266;
			    min-width: 28px;
			    border-radius: 4px;
				border: 1px solid #CCCCCC ;
				font-size: 12px;
				color: #555555;
			}
			::v-deep.el-pagination.is-background .el-pager li:hover {
			    color: #1890FF;
				border: 1px solid #1890FF ;
			    background-color: #fff;
			}
			::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active {
			    color: #1890FF;
				border: 1px solid #1890FF ;
			    background-color: #fff;
			}
		}
	}
</style>
